<template>
  <el-dialog :title="title" :visible.sync="Showtype" width="800px" append-to-body>
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-row :gutter="20">
        <el-col :span="12" :offset="0">
          <el-form-item label="姓名" style="margin-bottom: 15px" prop="nickName">
            <el-input v-model="form.nickName" placeholder="请输入姓名" size="small" />
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="0">
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="form.phone" placeholder="请输入手机号" size="small" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="20" :offset="0">
          <el-form-item label="区域级别" prop="areaLevel">
            <el-radio-group v-model="form.areaLevel">
              <el-radio :label="1">区</el-radio>
              <el-radio :label="2">市</el-radio>
              <el-radio :label="3">省</el-radio>
              <!-- <el-radio :label="4">平台</el-radio> -->
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="20" :offset="0">
          <el-form-item label="地区">
            <v-distpicker :onlyProvince="form.areaLevel > 2" :hideArea="form.areaLevel > 1" :province="form.province"
              :city="form.city" :area="form.area" @province="onChangeProvince" @city="onChangeCity"
              @area="onChangeArea">
            </v-distpicker>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="Showtype = false">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {
  addArea, updateArea
} from "@/api/mall/area";
import debounce from "@/utils/debounce";

export default {
  name: "",
  data() {
    return {
      isEdit: false, // 是否 修改
      isSubmit: false,
      selectLoading: false,
      merchantId: "",
      deptId: "",
      title: "新增区域代理",
      Showtype: false,
      memberList: [],
      form: {},
      rules: {},
      storeList: [],
      areaRoleList: [
        // { id: 1, name: "普通客户", value: 0 },
        { id: 1, name: "客服", value: 1 },
        { id: 2, name: "代理", value: 2 },
      ],
      queryParams: {
        merchantId: undefined,
      },
      // 查询方案参数
      query: {
        pageNum: 1,
        pageSize: 10,
      },
      params: {},
      checkMerchant: "",
      checkStore: "",
      checkAdmin: "",
      // 商品属性
      goodsAttrList: [],
      typeIdList: [],
      attrIdsList: [],
      rules: {
        nickName: [
          { required: true, trigger: "blur", message: "姓名不能为空" },
        ],
        phone: [
          { required: true, trigger: "blur", message: "手机号码不能为空" },
          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
        ],
        areaRole: [
          { required: true, trigger: "blur", message: "角色不能为空" },
        ],
        areaLevel: [
          { required: true, trigger: "blur", message: "区域级别不能为空" },
        ],
      },
    };
  },
  components: {},
  created() {
    //判断是否商户，门店用户
    // this.checkMerchant = this.$auth.hasRole("merchant");
    // this.checkStore =
    //   this.$auth.hasRole("store") || this.$auth.hasRole("staff");
    // this.checkAdmin = this.$auth.hasRole("admin");
  },
  mounted() {
    console.log("组件已挂载。");
  },
  updated() {
    // this.isEdit = false;
    console.log("组件已更新。");
  },
  destroyed() {
    console.log("组件已销毁。");
  },
  methods: {
    // 获取会员列表
    getMemberList(query) {
      console.log("query", query);
      if (query) {
        const params = {
          fullName: query,
        };
        this.selectLoading = true;
        debounce(
          () => {
            // memberlist(params).then((response) => {
            //   console.log("response.rows", response.rows);
            //   this.memberList = response.rows;
            //   this.selectLoading = false;
            // });
          },
          500,
          false
        );
      }
    },
    // 确定下拉选择
    async confirmSelect(e) {
      console.log("会员", e);
      let res = await memberlist({ phone: e.phone });
      this.form.phone = res.rows[0].phone;
      this.form.fullName = res.rows[0].fullName;
      this.form.memberId = res.rows[0].id;
    },
    //省市区县联动
    onChangeProvince(data) {
      var province = data.value;
      if (data.value == "省") {
        province = "";
      }
      this.form.province = province;
    },
    onChangeCity(data) {
      var city = data.value;
      if (data.value == "市") {
        city = "";
      }
      this.form.city = city;
    },
    onChangeArea(data) {
      var area = data.value;
      if (data.value == "区") {
        area = "";
      }
      this.form.area = area;
    },
    // 自定义方法
    // 在showI方法中重置tableData为初始值
    showI(Showtype, item) {
      this.title = "新增区域代理";
      this.form = {
        fullName: "",
        memberId: "",
        phone: "",
        areaLevel: "",
        areaRole: "",
        province: "江西省",
        city: "南昌市"
      };
      this.isEdit = false;

      if (item) {
        this.title = "区域代理";
        this.isEdit = true;
        this.form = item;
      }
      this.Showtype = Showtype;
    },

    //提交
    submitForm() {
      if (!this.form.id) {
        this.request(addArea, "新增");
      } else {
        this.request(updateArea, "修改");
      }
    },


    /** 提交请求 */
    request(mothod, str) {
      console.log("提交的数据", this.form);
      if (!mothod) return false;
      this.$refs["form"].validate((valid) => {
        if (valid) {
          mothod(this.form)
            .then((res) => {
              this.requestStatus = true;
              if (res.code == 200) {
                this.$message.success(`${str}成功！`);
                this.$emit("init");
                this.Showtype = false;
              }
            })
            .catch((error) => {
              goBack = true;
            });
        } else {
          goBack = true;
        }
      });
    },

  },
};
</script>

<style lang="scss" scoped>
.view-container {
  /* 样式 */

  .guige {
    border: 1px solid #666666;
    border-radius: 10px;
  }
}

.tb-content {
  ::v-deep .el-form-item__content {
    // width: 100%;
    border: 1px solid #666;
    padding: 20px;
  }
}

.table {
  padding: 5px 0;

  span {
    margin-right: 15px;
  }

  ::v-deep .ipt {
    display: inline-block;
    width: 50px;
    margin: 0 5px;
    text-align: center;
  }
}
</style>
